<template>
	<view class="pubbox">
		<!-- #ifdef H5 -->
		<fui-sticky>
			<fui-nav-bar zIndex="10000" title="应用推荐">
			</fui-nav-bar>
		</fui-sticky>
		<!-- #endif -->
		<view class="box">
			<view class="rect1" style="padding: 15rpx;background-color: var(--fui-bg-color-grey);">
				<!-- 轮播 -->
				<fui-swiper-dot v-if="appBanner.length" class="swiperd fui-rect" type="3" :items="appBanner" :styles="styles" :current="headCurrent" field="title">
					<swiper class="fui-banner__wrap" circular :indicator-dots="false" autoplay @change="changeSwiper" :interval="4500" :duration="150">
						<swiper-item v-for="(item,index) in appBanner" :key="index" @click="skip(item.open_url,item.title)">
							<image style="width: 100%;height: 100%;" :src="item?.bannerfile" mode="scaleToFill"></image>
						</swiper-item>
					</swiper>
				</fui-swiper-dot>
			</view>
			
			<!-- 置顶 -->
			<view class="grid fui-rect" v-if="headList?.length">
				<fui-grid :showBorder="false" :columns="5" :square="true">
					<fui-grid-item :highlight="false" v-for="(item,index) in headList" :key="index" style="height: initial;">
						<view class="fui-grid__cell fui-padding" @click="appDetail(item?._id,item?.title)">
							<view style="position: relative;">
								<view class="guanfang" v-if="item?.is_essence">
									官方推荐
								</view>
								<fui-lazyload width='100' height='100' mode="aspectFill" radius="10" :src="item?.application_logo" class="fui-icon__2x">
								</fui-lazyload>
							</view>
							<view class="text-font" style="font-size: 22rpx;color: var(--fui-color-subtitle);">
								{{item?.title.substring(0,5)}}
							</view>
							<view class="tap1 text-font">
								{{item?.excerpt?item?.excerpt.substring(0,5):'暂无摘要'}}
							</view>
						</view>
					</fui-grid-item>
				</fui-grid>
			</view>

			<fui-vtabs :height="vtabsHeight+'px'" style="margin-top: 50rpx;" class="fui-rect" :vtabs="tabs" :isBorder="false" :activeTab="current" :activeFontWeight="600" :fontWeight="600" :tabWidth="150" :linkage="false" @click="changetab">
				<view class="fui-vtabs-content__item">
					<view class="fui-content--box">
						<mescroll-body height="400" class="fui-rect" @init="mescrollInit" @down="downCallback" @up="upCallback">
							<view class="grid1">
								<uni-list :border="false">
									<uni-list-item style="width: 100%;" v-for="(item,index) in goods" :key="item._id" :parentId="pageId" avatarCircle :title="item?.title" @click="appDetail(item?._id)" :ellipsis="1" :avatarCircle="true" :note="item?.excerpt" :thumb="item?.application_logo" thumb-size="lg" show-extra-icon :rightText="getDateDiff(item.publish_date)" clickable :extra-icon="{size:18,color:iconColor,type:'search'}">
										<template v-slot:footer>
											<view style="display: flex;flex-direction: column; align-items: center;">
												<view style="color: #fd5531; font-weight: 600; font-size: 28rpx;height: 50rpx; display: flex;align-items: center;width: 150rpx;justify-content: center;background-color: #fddfda;border-radius: 200px;">下载</view>
												<view style="color: var(--fui-color-label);font-size: 20rpx;margin-top: 10rpx;">{{item?.view_count+'人下载'}}</view>
											</view>
										</template>
									</uni-list-item>
								</uni-list>
							</view>
						</mescroll-body>
					</view>
				</view>
			</fui-vtabs>

			<bottomPop></bottomPop>
			<fui-skeleton v-if="skeletonShow" background="#F1F4FA" outerClass="box"></fui-skeleton>
		</view>
	</view>
</template>

<script setup>
	import { getDateDiff } from "@/utils/index.js"
	import { GlobalStore } from "@/store/index.js";
	import { ConfigStore } from '@/store/modules/config.js'
	import { values } from "lodash";
	const api = uniCloud.importObject('qc-article', { customUI: true })
	import { LoginStore } from "@/store/modules/login.js";
	import { ref, reactive, computed, onMounted } from 'vue'
	const userInfo = computed(() => (LoginStore().userInfo))
	import bottomPop from '@/components/bottomPop.vue'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import { onLoad, onPageScroll, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
	let statusBarHeight = ref(null)
	onLoad(async () => {
		await init()
		// 数据更新触发刷新列表
		uni.$on('resetUpScroll', () => {
			getMescroll().resetUpScroll()
		})
		const info = uni.getSystemInfoSync()
		statusBarHeight.value = info.statusBarHeight + 44
	})
	const headHeight = ref(200)
	const vtabsHeight = ref(400)
	onMounted(() => {
		const info = uni.getSystemInfoSync()
		uni.createSelectorQuery().select('.rect1').boundingClientRect().exec((ret) => {
			headHeight.value = ret[0].height
		})
		// #ifdef H5
		vtabsHeight.value = info.windowHeight - headHeight.value - info.statusBarHeight - 55 - 88
		// #endif
		// #ifdef APP
		vtabsHeight.value = info.windowHeight - headHeight.value - info.statusBarHeight - 55
		// #endif
	})
	const appBanner = ref([])
	const init = async () => {
		//tabs
		const res1 = await api.getCategories({
			publish_type: '1'
		})
		tabs.value = res1.data
		let params = {
			pageNum: 1,
			pageSize: 10,
			user_id: userInfo?.value?._id,
			publish_type: '1',
			category_id: tabs?.value[current?.value]?._id
		}
		//app置顶数据
		const res2 = await api.applicationTop()
		headList.value = res2.data
		let num = 0
		num = 10 - headList.value.length
		if (num > 5) {
			for (let i = 0; i < num - 5; i++) {
				headList?.value.push({
					title: "虚位以待",
					application_logo: "../../../static/image/zwyy.png"
				})
			}
		} else {
			for (let i = 0; i < num; i++) {
				headList.value.push({
					title: "虚位以待",
					application_logo: "../../../static/image/zwyy.png"
				})
			}
		}
		// 获取轮播图
		const res = await api.getAdList({
			pageNum: 1,
			pageSize: 10,
			publish_type: '3',
			category_id: '1'
		})
		appBanner.value = res.data

		getMescroll().resetUpScroll()
		skeletonShow.value = false
	}
	//骨架屏
	const skeletonShow = ref(true)
	let scrollY = ref(false)

	let current = ref(0) // tab&&轮播图 current

	const headCurrent = ref(0) //顶部轮播图

	const changeSwiper = (e) => {
		headCurrent.value = e.detail.current;
	}
	const styles = {
		height: 50,
		bottom: 0,
		radius: true
	}
	//下拉刷新
	onPullDownRefresh(async () => {
		uni.stopPullDownRefresh();
		init()
	})
	//轮播图跳转
	const skip = (e, title) => {
		if (title == '虚位以待') return GlobalStore().changebomShow()
		let index = e.indexOf("?")
		let url = e.substring(0, index);
		let id = e.substring(e.lastIndexOf("=") + 1, e.length)
		if (e.indexOf('http') == -1) {
			let publish_type = "0"
			// 判断跳转什么页面 动态切换请求详情参数publish_type
			if (url.indexOf('wzDetail') != -1) {
				publish_type = "0"
			} else if (url.indexOf('appDetail') != -1) {
				publish_type = "1"
			} else if (url.indexOf('preheatDetail') != -1) {
				publish_type = "4"
			} else if (url.indexOf('firstOrderDetail') != -1) {
				publish_type = "6"
			} else if (url.indexOf('groupDetail') != -1) {
				publish_type = "5"
			}
			//内部链接
			let item = {
				_id: id,
				publish_type: publish_type
			}
			// #ifdef APP-PLUS
			uni.navigateTo({
				url: `${url}?item=${JSON.stringify(item)}`
			})
			// #endif
			// #ifdef H5
			uni.navigateTo({
				url: `${url}?item=${encodeURI(JSON.stringify(item))}`
			})
			// #endif
		} else {
			//外部链接
			// #ifdef APP-PLUS
			plus.runtime.openURL(e)
			// #endif
			// #ifdef H5
			window.open(e)
			// #endif
		}
	}
	//详情
	const appDetail = (_id, title) => {
		if (title == "虚位以待") return uni.fui.toast('虚位以待')
		let item = {
			_id,
			publish_type: "1"
		}
		// #ifdef APP-PLUS
		uni.navigateTo({
			url: `/pages/tabbar/application/appDetail?item=${JSON.stringify(item)}`
		})
		// #endif
		// #ifdef H5
		uni.navigateTo({
			url: `/pages/tabbar/application/appDetail?item=${encodeURI(JSON.stringify(item))}`
		})
		// #endif
	}
	const swiperHight = ref(500) //轮播图默认高度
	const headList = ref()

	let tabs = ref([])
	const changetab = (e) => {
		goods.value = []
		current.value = e.index
		getMescroll().resetUpScroll()
	}
	const shiwperchange = (e) => {
		current.value = e.detail.current
	}
	const goods = ref([])
	// 分页
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom)
	const upCallback = async (mescroll) => {
		mescroll.optDown.isLock = true
		mescroll.size = 30
		try {
			setTimeout(async () => {
				let params = {
					pageNum: mescroll.num,
					pageSize: mescroll.size,
					user_id: userInfo?.value?._id,
					publish_type: '1',
					category_id: tabs?.value[current?.value]?._id
				}
				const res = await api.getAdList(params)

				const curPageData = res.data || [] // 当前页数据
				if (mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
				goods.value = goods.value.concat(curPageData); //追加新数据
				//方法一(推荐): 后台接口有返回列表的总页数 totalPage
				mescroll.endBySize(curPageData.length, res.total); //必传参数(当前页的数据个数, 总页数)
			}, 500)
		} catch (e) {
			mescroll.endErr(); // 请求失败, 结束加载
		}
	}
</script>

<style lang="scss" scoped>
	.guanfang {
		font-size: 20rpx;
		color: #fff;
		padding: 0rpx 10rpx;
		background-color: #fc5531;
		position: absolute;
		top: -4px;
		left: 10rpx;
		border-radius: 8rpx;
		z-index: 99;
	}

	.text-font {
		width: 120rpx;
		height: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		white-space: nowrap;
		font-size: 18rpx;
		color: var(--fui-color-subtitle);
	}

	.tap1 {
		background-color: var(--fui-color-primary);
		color: #fff;
		z-index: 1;
		width: 100%;
		border-radius: 10rpx;
	}

	.swiperd {
		border-radius: 16rpx;
	}

	.fui-banner__item {
		width: 100%;
		height: 360rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 600;
		border-radius: 16rpx;
	}

	.fui-banner__wrap {
		border-radius: 16rpx;
		height: 360rpx;
	}

	.fui-custom__wrap {
		width: 100%;
		height: 500rpx;
	}

	.margintop {
		margin-top: 20rpx;
	}

	.detailcon {
		font-size: 24rpx;
		color: var(--fui-color-subtitle);
	}

	.appdetail {
		padding-top: 20rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: 900;
	}

	.time {
		border-bottom: 1px solid #dee1e6;
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
	}

	.center {
		display: flex;
		justify-content: center;
	}

	.fui-scroll__wrap {
		padding: 32rpx;
		position: relative;
	}

	.fui-title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: right;
		padding-bottom: 24rpx;
	}

	.fui-icon__close {
		position: absolute;
		top: 24rpx;
		left: 24rpx;
	}

	.fui-scroll__view {
		width: 100%;
		height: 1000rpx;
	}

	.addAPP {
		padding: 0rpx 22rpx;
	}

	.box {
		background-color: #fff;
	}

	.grid1 {
		width: 80vw;
		border-radius: 16rpx;
		background-color: var(--fui-bg-color);

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.grid {
		border-radius: 16rpx;
		background-color: var(--fui-bg-color);
		padding: 32rpx 0 0 0;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}
	}

	.fui-grid__cell {
		position: relative;
		margin: auto;
		text-align: center;
	}

	.fui-grid__item {
		margin-top: 10rpx;
	}

	::v-deep .uni-list--lg {
		height: 90rpx;
		width: 90rpx;
		border-radius: 8px !important;
	}
</style>